<!-- @author zhengjie -->
<template>
    <div class="icon-body">
        <el-input v-model="name" style="position: relative;" clearable placeholder="请输入图标名称"
        >
            <i slot="suffix" class="el-icon-search el-input__icon"/>
        </el-input>
        <div class="icon-list">
            <div v-for="(item, index) in filterIcons" :key="index" @click="selectedIcon(item)">
                <svg-sensor-icon :icon-class="item.value" style="height: 30px;width: 16px;"/>
                <span>{{ item.labelName }}</span>
            </div>
        </div>
    </div>
</template>

<script>
import icons from './requireIcons'
// 添加图标需要在icons文件和sensorIcons文件同时添加上去
export default {
    name: 'IconSensorSelect',
    props: {
        currentIndex: {
            type: Number,
            default: 0
        }
    },
    data() {
        return {
            name: '',
            labelObj: {
                temperature: '温度',
                voltage: '电压',
                wind: '风速',
                PH: 'PH值',
                lightIntensity: '光照强度',
                precipitation: '降雨量',
                pressure:'压力',
                carring:'流量',
                humidity:'湿度',
                EC:'EC值',
                dissolvedOxygen:'溶解氧',
                ryb:'溶氧比',
            },
            list: []
        }
    },
    created() {
        icons.forEach((item, index) => {
            console.log(item)
            if (this.labelObj.hasOwnProperty(item)) {
                let obj = {
                    value: item,
                    labelName: ''
                }
                obj.labelName = this.labelObj[item]
                this.list.push(obj)
            }
        })
    },
    computed: {
        filterIcons() {
            if (this.name === '') {
                return this.list
            } else {
                return this.list.filter((item, index) => {
                    return item.labelName.includes(this.name)
                })
            }
        }
    },
    methods: {
        selectedIcon(item) {
            item.currentIndex = this.currentIndex
            this.$emit('selected', item)
            document.body.click()
        },
        reset() {
            this.name = ''
        }
    }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.icon-body {
    width: 100%;
    padding: 10px;

    .icon-list {
        height: 200px;
        overflow-y: scroll;

        div {
            height: 30px;
            line-height: 30px;
            margin-bottom: -5px;
            cursor: pointer;
            width: 33%;
            float: left;
        }

        span {
            display: inline-block;
            vertical-align: -0.15em;
            fill: currentColor;
            overflow: hidden;
        }
    }
}
</style>
